$marginDistance:var(--marginDistance);//外边距
$baseDistance:var(--baseDistance);//内边距以及上下边距
$formItem:var(--formItem);//各form-item间隔距离
$formItemContentTop:var(--formItemContentTop);//form-item-content距离上边的距离
$normalFontSize:var(--normalFontSize);//普通文字大小
$middleFontSize:var(--middleFontSize);//中等文字大小
$bigFontSize:var(--bigFontSize);//大文字大小
$bigerFontSize:var(--bigerFontSize);//超大文字一般iconfont
$baseColor:var(--baseColor);//文字的颜色
$normalBlue: var(--normalBlue);
$treeColor: var(--treeColor);
//定义整体的颜色值
$backgroundColor:var(--backgroundColor) ;//整个大背景色
$whiteColor:var(--whiteColor);
$breadcrumbColor:var(--breadcrumbColor);//面包屑的颜色
$tableBackgroundColor:var(--tableBackgroundColor);//table的背景色
$tableHeaderColor: var(--tableHeaderColor); //table的th
$formItemLabelColor:var(--formItemLabelColor);//表单项中的label颜色
$formItemContentColor:var(--formItemContentColor);//表单项中的内容颜色
$treeIconColor:var(--treeIconColor);//树中的小箭头
$treeIconfontColor:var(--treeIconfontColor);//树中的iconfont颜色
$borderColor:var(--borderColor);//下框线的颜色
$fontRedColor:var(--fontRedColor);
$fontOrangeColor:var(--fontOrangeColor);
$tipColor:var(--tipColor);
// 全局修改滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 4px;
  cursor: pointer;
}

//全局修改自定义校验
.el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap>.el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)>.el-form-item__label:after {
  margin-left: 5px;
}

//面包屑的颜色
.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
  color: $breadcrumbColor;
  font-weight: normal;
}

//全局让按钮文本居中
.el-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

//清除el-tabs下框线
.clean .el-tabs__nav-wrap::after {
  background-color: transparent;
}


.marginR0 {
  margin-right: 0px !important;
}

.bolder {
  font-size: $bigFontSize;
  font-weight: bold;
}
.border {
  @extend .bolder;
  border-left: 2px solid $normalBlue;
  padding-left: $normalFontSize;
}
.normalFont {
  font-size: $middleFontSize;
  font-weight: 500;
}


.whiteBgColor {
  background-color: $whiteColor;
}

.orangeColor {
  color: $fontOrangeColor;
}

.redColor {
  color: $fontRedColor;
}

.redBgColor {
  background: $fontRedColor !important;
}

.bluebgColor {
  color: $whiteColor;
  background: $normalBlue !important;
}

.bgColor {
  background-color: $backgroundColor;
}

.bottomLine {
  border-bottom: 1px solid $borderColor;
}
.borderR {
  border-radius: 6px;
}
.marginT8 {
  margin-top: 8px;
}
.marginT18 {
  margin-top: 18px;
}

.marginT24 {
  margin-top: 24px !important;
}

.marginR20 {
  margin-right: 20px;
}

.marginR34 {
  margin-right: 34px;
}

.marginB18 {
  margin-bottom: 18px;
}

.marginB24 {
  margin-bottom: 24px;
}

.marginL30 {
  margin-left: 30px;
}

.marginLT20{
  margin-left:20px !important;
  margin-top: 20px  !important;
}

.paddingB18 {
  padding-bottom: 18px;
}
.paddingTRL0{
  padding-top: 0px !important;
  padding-right: 0px  !important;
  padding-left: 0px !important;
}
.asideR .el-aside {
  border-right: 10px solid $backgroundColor;
}

.lineH32 {
  height: 32px !important;
  line-height: 32px !important;
}
//基本按钮样式
.setBtnInfo{
  .el-button {
    padding: 5px 16px;
    height: 32px;

    span {
      font-size: $middleFontSize;
    }
  }
}
//设置表单项
.setAllFormItem{
  color: $formItemLabelColor;
  font-weight: 500;
  .el-select-dropdown{
    top: auto !important;
    left:auto !important;
  }
  .el-input-group__append {
    color: $normalBlue;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
  .el-form-item{
    font-size: $middleFontSize;
    margin-bottom: $formItem !important;
    .el-form-item__label{
      line-height: 22px;
      color: inherit !important;
      padding-bottom: 0px  !important;
      width: max-content;
    }
    .el-form-item__content{
      line-height: 32px;
      color:$formItemContentColor ;
      margin-top: $formItemContentTop  !important;
      .el-input,.el-textarea{
        width: 250px;
        input{
          height: 32px;
          line-height: 32px;
        }
        textarea{
          height: 80px;
        }
        .el-input__suffix{
          .el-input__suffix-inner{
            display: block;
          }
        }
      }
    }
  }
  .contentPadding0{
    .el-form-item{
     .el-form-item__content{
       margin-top: 0px  !important;
      }
    }
  }
  .rowItem{
    .el-form-item{
      margin-top: $baseDistance;
      height: 22px;
      display: inline-flex;
      align-items: center;
      .el-form-item__label{
        padding-right: $baseDistance !important;
      }
      .el-form-item__content{
        margin-top: 0 !important;
      }
    }
  }
  .radioItem {
    .el-form-item__content {
      display: block !important;
    }
  
    label {
      display: inline-block !important;
    }
  }
  .switchItem{
    .el-form-item__content{
      margin-top: 0px !important;
    }
  }
  // .verifyItem{
  //   input {
  //     width: 250px;
  //   }
  // }
}
.setTwoFormItem{
  @extend .setAllFormItem;
  .el-form-item .el-form-item__content{
      .el-input,.el-textarea{
        width: 320px;
    }
  }

}
//整个布局的大容器
.domainMainContent {
  @extend .setAllFormItem;
  @extend .borderR;
  margin: $marginDistance;
  .el-main{
     background-color: $whiteColor;
      padding:0 $baseDistance !important;
      @extend .setTwoFormItem;
      .content{
        padding-top: $baseDistance !important;
      }
  }
  .dept-aside {
    margin-right: $marginDistance;
    width:200px !important;
    @extend .borderR;
    background-color: $whiteColor;
  }

  .systemConTabs {
    height: 48px;
    line-height: 48px;
    margin-left: $baseDistance;
  }

  .systemBtn {
    position: absolute;
    top: 15px;
    right: 30px;
    z-index: 1;
    @extend .setBtnInfo;
  }

  .systemContent {
    .manage{
      padding: 0  !important;
    }
  }
}
//去除el-main的上下距离
.clearElMainDis{
  .el-main{
    padding: 0 !important;
  }
}
//部门树的样式components
.deptTree {
  .el-tree{
    @extend .normalFont;
    color: $treeColor;
  }
  .is-expanded {
    // padding-left: 10px;
  }
  .el-tree-node__expand-icon {
    color: $treeIconColor;
  }

  .el-tree-node__expand-icon.is-leaf {
    color: transparent;
  }

  .el-tree-node__content {
    height: 36px;
    line-height: 36px;
    span{
      font-size: $middleFontSize !important;
    }
  }
  .userNode{
    color: $treeColor;
  }
  .searchTree{
    text-align: center; height: 32px; line-height: 32px;margin-top: 15px;margin-bottom: 9px;
    .el-input{
      width: 95%; height: 30px;
    }
  }
}

.tableHeaderbg {
  @extend .normalFont;
  background: $tableBackgroundColor !important;
  height: 23px;
  color: $tableHeaderColor;
  line-height: 23px;
}

.el-table-w {
  .iconfont {
    color: $treeIconfontColor;
  }
}

.logoBtn {
  @extend .normalFont;

  .el-button {
    display: block;
    padding: 2px 10px;
    margin-bottom: 18px;
    color: $whiteColor;
    border-radius: 2px;

    span {
      display: inline-block;
      line-height: 20px;
      height: 20px;
    }
  }

  .el-button+.el-button {
    margin-left: 0;
  }
}
.smallHeader {
  position: relative;
  @extend .bolder;
  @extend .bottomLine;
  color:$baseColor;
  margin-bottom: 4px;
  padding-left: 7px;

  .header_name {
    @extend .bolder;
    height: 22px;
    font-size: $middleFontSize;
  }

  &::before {
    width: 3px;
    height: 15px;
    background: $normalBlue;
    position: absolute;
    top: 10%;
    left: 0px;
    content: '';
  }
}
.partContent {
  @extend .setTwoFormItem;
  .part {
    margin: $marginDistance;
    padding: 10px $baseDistance $baseDistance;
    background-color: $whiteColor;
    border-radius: 8px;

    .el-button {
      height: 32px;
    }
    .formItem {
      margin-left: $baseDistance;
      @extend .marginT24;
    }

    .partForm {
      padding: 0 $baseDistance $baseDistance;
    }
  }

  .part0 {
    margin: 0;
  }

  .systemPart {
    padding: 0 37px !important;
    height: 54px;
  }

  .divisionPart {
    margin: $marginDistance 0 0 0;
    padding-left: $baseDistance;
  }

  .searchPart {
    .smallHeader {
      margin-bottom: 0px !important;
    }
  }
}
//下划线
.tableListHeader {
  border: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  &::before {
    content: '';
    height: 1px;
    left: -20px;
    width: calc(100% + 40px);
    display: inline-block;
    background-color: $borderColor;
    position: absolute;
    top: 48px;
  }
}
//标题
.listHeader {
  height: 48px;
  padding: 8px $baseDistance;
  display: flex;
  align-items: center;

  .iconfont {
    font-size: $bigerFontSize;
  }
  i+span{
    margin-left: 4px;
  }

  &>div:first-child {
    @extend .bolder;
    color: $baseColor;

    i {
      color: $baseColor;
      font-weight: bold;
    }
  }

  @extend .setBtnInfo;

  .iconfont {
    font-size: $bigerFontSize;
  }
  &>.el-col:first-child{
    display: inline-flex;
  }
  .spanBtn{
    display: inline-block;
  }
  .spanBtn  + .spanBtn {
    margin-left: 10px;
  }
  @extend .tableListHeader;

}
.noListHeader{
  @extend .listHeader;
  padding: 0 $baseDistance !important;
  &::before {
    content: '';
    left: 0px;
    width:100%;
  }
}
.emailHeader{
  @extend .listHeader;
  padding: 8px $baseDistance !important;
  &::before {
    display: none;
  }
}

//系统管理的头部
.setHeader {
  @extend .bolder;
  margin-bottom: 28px;
  @extend .bottomLine;
  padding-bottom: 8px;

  .el-divider-header {
    @extend .border;
    border: 0;
    padding-left: 7px;
    border-width: 3px;
    color: $baseColor;
    position: relative;
    &::before {
      position: absolute;
      content: '';
      width: 3px;
      height: $marginDistance;
      background-color: $normalBlue;
      left: 0;
      top: 2px;
  }
  }
}

.dialog-header-title {
  i {
    margin-right: 4px;
  }

  span {
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    color: $formItemLabelColor;
    line-height: 25px;
  }
}

//搜索
.searchForm {
  position: relative;
  font-size: $middleFontSize;
  padding: 26px 0 14px 0;
  .searchDiv {
    padding-bottom: 10px;
  }
  .formItem:first-child {
    margin: 0 !important;
  }

  .el-input {
    input {
      width: 217px;
    }
  }

  .el-select-w {
    width: 217px;
  }
  .el-form-item{
    margin-bottom: 0px !important;
    padding: 0px !important;
    margin-right: 24px !important;
    .el-form-item__label{
      color: inherit !important;
      padding-bottom: 0px  !important;
      line-height: 28px !important;
    }
    .el-form-item__content{
      margin-top: 0px  !important;
      .el-input,.el-textarea{
        font-size: $middleFontSize;
        width: 100% !important;
      }
    }
  }

  //全局修改按钮高度
  @extend .setBtnInfo;

  .el-button+.el-button {
    margin-left: 10px !important;
  }
  .childBtn{
    position: absolute;
    right: 0;
    top: 26px;
  }
}
//流程监控搜索
.flowItem{
  .el-form-item{
    margin-right: 0px  !important;
    .el-select-w{
      width: 100%  !important;
    }
    .el-input {
      input {
        width: 100%  !important;
      }
    }
    
  }
  .el-col{
    margin-left: 8px;
    &:first-child{
      margin-left: 0px;
    }
  }
}
.mainContent {
  .el-main {
    padding: 0 $baseDistance !important;
  }

  .mainBg {
    height: calc(100% - 96px);
    overflow: auto;
  }
}
//提示文字
.tip-text {
  font-size: $normalFontSize;
  @extend .orangeColor;
  width: max-content;
}

.tipCleanText {
  @extend .normalFont;
  position: relative;
  margin-left: 30px;
  width: 400px;
  height: 40px;
  background: $tipColor;
  border-radius: 2px;
  padding-left: 17px;
  line-height: 40px;

  .spanText {
    @extend .marginL30;
  }
}

//全局定义页数位置
.el-pagination {
  text-align: right;
  padding: $marginDistance 0px;
  .el-pagination__sizes{
    margin-right: 0 !important;
  }
}

//定义高度
.allContainerHeight{
  height:calc(100% - 96px) !important;
  .containerHeight{
    height: calc(100% - 32px) !important;
    .containerContentHeight{
      height: calc(100% - 48px) !important;
      .userTable{
        .el-table__body-wrapper{
          height:calc(100% - 48px) !important;
        }
      }
    }
 }
}
.el-dialog{
  .dialog-header-title{
    .iconfont{
      font-size: $bigerFontSize;
    }
  }
  @extend .setTwoFormItem;
  .el-form-item .el-form-item__content{
      .el-input{
        // width: 100%;
      }
  }
  //弹窗下面的按钮
.el-dialog__footer {
  @extend .setBtnInfo;
}
}
//另外给文本框赋值为360
.baseinfo{
  .el-textarea{
    width: 360px !important;
  }
  //把样式弄出来
  .el-tag {
    margin-right: 10px;
  }
}
//全局修改prover
.el-popover{
  min-width: 200px;
  max-width: 400px;
}
.el-divider-bottom {
  margin-bottom: $marginDistance;
}
//给流程监控按钮
.flowstaterts{
  .delbtn{
    @extend .setBtnInfo;
    .el-button:first-child span{
      color: $whiteColor !important;
    }
  }
}
//给弹窗全局加
.dialogDetail {
    .el-dialog__header {
      padding: 20px 0 0 20px !important;
    }

    .el-dialog__body {
      padding: 20px !important;
    }
    .el-dialog__footer {
      padding: 0 20px 20px !important;
      .el-button{
        margin-left: 10px;
      }
    }
}
.padding0Dialog{
    .el-dialog__body {
      padding: 0px !important;
    }
}
.paddingTB0Dialog{
  .el-dialog__body {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
}

//单独给角色列表中的弹窗
.roleDialog .el-dialog__body{
   padding-top: 0px;
   padding-bottom: 0px;
   .el-main{
    padding-top: 0px;
   }
}
.el-table{
  //给el-table移上去赋小点的值
 .el-table--enable-row-hover .el-table__body tr:hover>td{
  background-color: rgba(245,247,250,0.3);
 }
  //给复选框后的标题的加粗
   .el-table-column--selection + td{
    font-weight: bold ;
  }
  .el-table__body-wrapper{
    .el-button{
      padding: 5px 10px;
      span{
        font-size: $normalFontSize;
      }
    } 
  }
}
